<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ---------------------------------------------------------------------
    // async function async1() {
    //     console.log('async1 start')
    //     await async2()
    //     console.log('async1 end')
    // }
    // async function async2() {
    //     console.log('async2')
    // }
    // console.log('script start')
    // setTimeout(function () {
    //     console.log('settimeout')
    // })
    // async1()
    // new Promise(function (resolve) {
    //     console.log('promise1')
    //     resolve()
    // }).then(function () {
    //     console.log('promise2')
    // })
    // console.log('script end')

    // 结果
    //  script start
    //  async1 start
    //  async2
    //  promise1
    //  script end
    //  async1 end
    //  promise2
    //  settimeout

    // 解析
    // 首先走到23行执行同步代码打印出script start
    // 再往下走，到27行调用函数async1()，跳到15行执行函数体
    // 打印16行async1 start,走到17行调用了函数async2()，跳到21行执行打印async2
    // await下一行18行为微任务，再往下走到28行的同步代码
    // 执行29行promise1，再往下走then为微任务所以先不执行
    // 再往下走到34行打印script end
    // 同步代码执行完后，找微任务，走到18行打印async1 end
    // 再往下走到31行的then打印32行promise2
    // 微任务找完了，找宏任务，走到24行打印25行的settimeout



    // ---------------------------------------------------------------------
    // setTimeout(() => {
    //     console.log(1);
    // }, 0);
    // new Promise((resolve, reject) => {
    //     console.log(2);
    //     resolve("p1");
    //     new Promise((resolve, reject) => {
    //         console.log(3);
    //         setTimeout(() => {
    //             resolve("setTimeout2");
    //             console.log(4);
    //         }, 0);
    //         resolve("p2");
    //     }).then(data => {
    //         console.log(data);
    //     })
    //     setTimeout(() => {
    //         resolve("setTimeout1");
    //         console.log(5);
    //     }, 0);
    // }).then(data => {
    //     console.log(data);
    // });

    // 结果
    // 64行   2
    // 67行   3
    // 74行   p2
    // 81行   p1
    // 61行   1
    // 70行   4
    // 78行   5


    // 解析
    // 首先走到63行执行同步代码打印出64行的2
    // 65行 resolve("p1");传值给80行的data
    // 走到66行执行同步代码打印出67行的3
    // 72行的 resolve("p2");传值给73行的data
    // 同步代码执行完去找微任务，首先走到73行打印74行的data为p2
    // 走到80行打印81行的data为p1，执行完微任务。去找宏任务
    // 走到60行执行61行打印出1
    // 走到68行打印70行的4，由于此时73行的data已经赋值，所以69行的resolve("setTimeout2");不生效
    // 再走到76行打印78行的5，此时80行的data已经赋值，所以77行的 resolve("setTimeout1");不生效


    // ---------------------------------------------------------------------
    // console.log(11);
    // setTimeout(() => {
    //     console.log(12);
    //     let p = new Promise((resolve, reject) => {
    //         resolve(13);
    //     });
    //     p.then(data => {
    //         console.log(data);
    //     });
    //     console.log(15);
    // }, 0);
    // console.log(14);

    // 结果
    //  11
    //  14
    //  12
    //  15
    //  13

    // 解析
    // 首先走到107行执行同步代码打印出107行的11
    // 再走到118行执行同步代码打印出14
    // 同步代码执行完成后寻找微任务，没有微任务，找宏任务，走到108行执行宏任务
    // 首先打印109行的同步代码12
    // 走到11行 resolve(13);将值赋值给113行的data，由于then是微任务所以先走到116行打印15
    // 然后在到113行打印114行的data为13






    // ---------------------------------------------------------------------

    // const handleClick = () => {
    //     console.log('iop');
    //     new Promise((resolve, reject) => {
    //         console.log('promise-1');
    //         setTimeout(() => {
    //             console.log('promise-timeeout');
    //         }, 0)
    //         resolve('222')
    //     }).then((res) => {
    //         setTimeout(() => {
    //             console.log('promise-then-timeout');
    //         }, 0)
    //         console.log('promise-then');
    //     })
    //     console.log('iop3333');
    //     setTimeout(() => {
    //         console.log('timeout-222');
    //     }, 0)
    // }
    // handleClick()

    // 结果
    // 143行   iop
    // 145行   promise - 1
    // 156行   iop3333
    // 154行   promise - then
    // 147行   promise - timeeout
    // 149行   timeout - 222
    // 152行   promise - then - timeout

    // 解析
    // 首先调用  handleClick()
    // 进入函数内部执行，打印同步代码143行 console.log('iop');
    // 再进入同步代码144行内，打印同步代码145行console.log('promise-1');
    // 因为setTimeout是异步的宏代码所以先往下走
    // 96行的resolve给150行的res赋值为222
    // 150行的then为异步的微代码，继续往下走
    // 走到156行打印同步代码 console.log('iop3333');
    // 现在同步代码都打印完了，进入下一个循环，去找微代码
    // 走到150行执行微代码，因为setTimeout是异步的宏代码所以先往下走，打印154行 console.log('promise-then');
    // 微任务执行完了，进入下一个循环找宏任务
    // 走到146行执行宏任务setTimeout里的147行 console.log('promise-timeeout');
    // 再往下走，走到148行执行149行打印  console.log('timeout-222');
    // 再回到then里，走到151行执行152行打印 console.log('promise-then-timeout');




    // ---------------------------------------------------------------------
    // async function fn1() {
    //     console.log(1)
    //     await fn2()
    //     console.log(2)
    // }
    // async function fn2() {
    //     console.log('fn2')
    // }
    // fn1()
    // console.log(3)

    // 结果
    //  1
    //  fn2
    //  3
    //  2


    // 解析
    // 首先走到199行，调用fn1函数，跳到191行
    // 打印192行的1
    // 再走到193行执行 await fn2()
    // 跳转到196行进入函数体内执行197行的代码打印fn2
    // 再往下走，到200行的同步代码打印3
    // 进入下一次循环，找微任务，找到194行的微任务代码执行打印2

</script>

</html>